import React from 'react';
import { cn } from '@/lib/utils';

interface StatCardProps {
  title: string;
  value: string | number;
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
  className?: string;
}

export function StatCard({ 
  title, 
  value, 
  variant = 'default',
  className 
}: StatCardProps) {
  // 根据变体确定样式
  const variantStyles = {
    default: '',
    primary: 'border-l-4 border-primary',
    success: 'border-l-4 border-success',
    warning: 'border-l-4 border-warning',
    error: 'border-l-4 border-destructive',
  };
  
  // 根据变体确定数值颜色
  const valueStyles = {
    default: 'text-foreground',
    primary: 'text-primary',
    success: 'text-success',
    warning: 'text-warning',
    error: 'text-destructive',
  };
  
  return (
    <div 
      className={cn(
        "stat-card transition-all duration-300 hover:translate-y-[-2px]",
        variantStyles[variant],
        className
      )}
    >
      <h3 className="text-sm font-medium text-muted-foreground mb-2">
        {title}
      </h3>
      <p className={cn("text-3xl font-bold", valueStyles[variant])}>
        {value}
      </p>
    </div>
  );
}

export default StatCard; 